<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';
    </script>
    <title>菜单---搜索栏</title>
    <link rel="stylesheet" href="../css/heard.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/menu.css">
</head>

<body>
    <header>
        <div class="onedv">
            <div class="oev1">
                <img src="../imgs/ad-01.png" alt="">
            </div>
            <div class="oev2">
                <span class="ovsp1"><img src="../imgs/ad-02.png" alt=""></span>
                <span class="ovsp2"><img src="../imgs/ad-01.jpg" alt=""></span>
                <span class="ovsp3"><img src="../imgs/ad-03.png" alt=""></span>
            </div>
        </div>
        <div class="mains">
            <div class="main">
                <div class="list">
                    <input type="text" placeholder="搜索">
                    <span class="main1"><img src="../imgs/ad-02.png" alt=""></span>
                </div>
                <div class="list2">

                    <span class="main2"><img src="../imgs/ad-01.jpg" alt=""></span>
                    <span class="main3"><img src="../imgs/错.png" alt=""></span>
                </div>
            </div>
        </div>

    </header>
    <section>
        <a href="">
            <li class="oneul">
                <span class="oeli1">首页</span>
                <span class="oeli2"><img src="../imgs/ad-15.png" alt=""></span>
            </li>
        </a>
        <div class="onul1">
            <div class="oneul">
                <span class="oeli1">协会概况</span>
                <span class="oeli2"><img src="../imgs/ad-15.png" alt=""></span>
            </div>
            <div class="oneul1">
                <a href="" class="oneul2">协会简介</a>
                <a href="" class="oneul2">联系方式</a>
                <a href="" class="oneul2">协会领导</a>
                <a href="" class="oneul2">协会机构</a>
                <a href="" class="oneul2">联系方式</a>
            </div>
        </div>
        <div class="onul1">
            <div class="oneul">
                <span class="oeli1">职业教育</span>
                <span class="oeli2"><img src="../imgs/ad-15.png" alt=""></span>
            </div>
            <div class="oneul1">
                <a href="" class="oneul2">面授培训</a>
                <a href="" class="oneul2">网络培训</a>
                <a href="" class="oneul2">资格考试</a>
                <a href="" class="oneul2">线上报名</a>
                <a href="" class="oneul2">师资库</a>
            </div>
        </div>
        <div class="onul1">
            <div class="oneul">
                <span class="oeli1">会员服务</span>
                <span class="oeli2"><img src="../imgs/ad-15.png" alt=""></span>
            </div>
            <div class="oneul1">
                <a href="" class="oneul2">入会申请</a>
                <a href="" class="oneul2">会员记录</a>
            </div>
        </div>
        <div class="onul1">
            <div class="oneul">
                <span class="oeli1">政策咨询</span>
                <span class="oeli2"><img src="../imgs/ad-15.png" alt=""></span>
            </div>
            <div class="oneul1">
                <a href="" class="oneul2">政策法规</a>
                <a href="" class="oneul2">行业动态</a>
                <a href="" class="oneul2">通知公告</a>
            </div>
        </div>
        <div class="onul1">
            <div class="oneul">
                <span class="oeli1">内审之家</span>
                <span class="oeli2"><img src="../imgs/ad-15.png" alt=""></span>
            </div>
            <div class="oneul1">
                <a href="" class="oneul2">内审通报</a>
                <a href="" class="oneul2">光荣榜</a>
                <a href="" class="oneul2">企业名录</a>
            </div>
        </div>
        <div class="onul1">
            <div class="oneul">
                <span class="oeli1">文化交流</span>
                <span class="oeli2"><img src="../imgs/ad-15.png" alt=""></span>
            </div>
            <div class="oneul1">
                <a href="" class="oneul2">对外交流</a>
                <a href="" class="oneul2">文化建设</a>
            </div>
        </div>
        <div class="onul1">
            <div class="oneul">
                <span class="oeli1">个人中心</span>
                <span class="oeli2"><img src="../imgs/ad-15.png" alt=""></span>
            </div>
            <div class="oneul1">
                <a href="" class="oneul2">个人资料</a>
                <a href="" class="oneul2">密码修改</a>
                <a href="" class="oneul2">消息通知</a>
                <a href="" class="oneul2">报名信息</a>
            </div>
        </div>
        <a href="">
            <div class="login">
                <img src="../imgs/ad-17.png" alt=""> 登陆
            </div>
        </a>
    </section>
</body>

</html>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    $(".ovsp1").click(function() {
        $(".mains").show();
        $(".onedv").hide();
    })
    $(".main3").click(function() {
        $(".onedv").show();
        $(".mains").hide();
    })
</script>
<script>
  $(document).ready(function() {
  var bol = false;
  var $idx = 100;
  $(".onul1").click(function(){
    var $index = $(this).index() - 1; 
    if(bol){
      $(".oneul1").eq($index).show();
      $(".oneul1").eq($idx).hide();
      if($idx == $index){
        $idx = 100;
      }else{
        $idx = $index;
      }
      bol = false;
    }else{
      $(".oneul1").eq($index).show();
      $(".oneul1").eq($idx).hide();
      bol = true;
      if($idx == $index){
        $idx = 100;
      }else{
        $idx = $index;
      }
    }
  });
});
</script>